/*
 * @Author: Await
 * @Date: 2025-05-06 17:05:35
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 17:05:35
 * @Description: 主题基本配置组件
 */
import React, { useState } from 'react';
import {
  Row,
  Col,
  Typography,
  ColorPicker,
  Divider,
  Input,
  InputNumber,
  Select,
  Space,
  Button,
  Tooltip,
  Card,
} from 'antd';
import { PlusOutlined, DeleteOutlined, InfoCircleOutlined } from '@ant-design/icons';
import type { ThemeConfig } from '../../../types/chartTypes';

const { Title, Text } = Typography;
const { Option } = Select;

interface BasicConfigProps {
  value: ThemeConfig;
  onChange: (newValue: any) => void;
}

/**
 * 主题基本配置组件
 * 包含颜色、背景色、文字样式等基本配置
 */
const BasicConfig: React.FC<BasicConfigProps> = ({ value, onChange }) => {
  // 处理系列颜色
  const handleColorChange = (index: number, color: string) => {
    const newColors = [...(value.color || [])];
    newColors[index] = color;
    
    onChange({
      ...value,
      color: newColors,
    });
  };

  // 添加颜色
  const addColor = () => {
    const newColors = [...(value.color || []), '#6b9ac4'];
    onChange({
      ...value,
      color: newColors,
    });
  };

  // 删除颜色
  const removeColor = (index: number) => {
    const newColors = [...(value.color || [])];
    newColors.splice(index, 1);
    
    onChange({
      ...value,
      color: newColors,
    });
  };

  // 更新背景色
  const handleBackgroundColorChange = (color: string) => {
    onChange({
      ...value,
      backgroundColor: color,
    });
  };

  // 更新文字样式
  const updateTextStyle = (key: string, val: any) => {
    onChange({
      ...value,
      textStyle: {
        ...(value.textStyle || {}),
        [key]: val,
      },
    });
  };

  // 更新标题样式
  const updateTitleStyle = (styleType: 'textStyle' | 'subtextStyle', key: string, val: any) => {
    onChange({
      ...value,
      title: {
        ...(value.title || {}),
        [styleType]: {
          ...((value.title || {})[styleType] || {}),
          [key]: val,
        },
      },
    });
  };

  return (
    <div className="theme-basic-config">
      <Card title="全局色彩" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Title level={5}>
              系列颜色
              <Tooltip title="用于不同数据系列的颜色定义，按顺序循环使用">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Title>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
              {(value.color || []).map((color, index) => (
                <div key={index} style={{ marginBottom: 16, display: 'flex', alignItems: 'center' }}>
                  <ColorPicker
                    value={color}
                    onChange={(color) => handleColorChange(index, color.toHexString())}
                    showText
                  />
                  {index > 0 && (
                    <Button
                      type="text"
                      icon={<DeleteOutlined />}
                      onClick={() => removeColor(index)}
                      style={{ marginLeft: 8 }}
                    />
                  )}
                </div>
              ))}
              <Button
                type="dashed"
                icon={<PlusOutlined />}
                onClick={addColor}
                style={{ width: 80, height: 32 }}
              >
                添加
              </Button>
            </div>
          </Col>

          <Col span={12}>
            <Title level={5}>
              背景色
              <Tooltip title="整个图表的背景色">
                <InfoCircleOutlined style={{ marginLeft: 8, fontSize: 14 }} />
              </Tooltip>
            </Title>
            <ColorPicker
              value={value.backgroundColor || 'transparent'}
              onChange={(color) => handleBackgroundColorChange(color.toHexString())}
              showText
            />
          </Col>
        </Row>
      </Card>

      <Divider style={{ margin: '24px 0' }} />

      <Card title="全局文字样式" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <Text>字体颜色</Text>
            <ColorPicker
              value={value.textStyle?.color || '#333'}
              onChange={(color) => updateTextStyle('color', color.toHexString())}
              showText
            />
          </Col>
          <Col span={8}>
            <Text>字体大小</Text>
            <InputNumber
              value={value.textStyle?.fontSize || 12}
              onChange={(val) => updateTextStyle('fontSize', val)}
              min={8}
              max={72}
              style={{ width: '100%' }}
            />
          </Col>
          <Col span={8}>
            <Text>字体</Text>
            <Select
              value={value.textStyle?.fontFamily || 'sans-serif'}
              onChange={(val) => updateTextStyle('fontFamily', val)}
              style={{ width: '100%' }}
            >
              <Option value="sans-serif">Sans-serif</Option>
              <Option value="serif">Serif</Option>
              <Option value="monospace">Monospace</Option>
              <Option value="Arial">Arial</Option>
              <Option value="Courier New">Courier New</Option>
              <Option value="Microsoft YaHei">微软雅黑</Option>
            </Select>
          </Col>
        </Row>
      </Card>

      <Divider style={{ margin: '24px 0' }} />

      <Card title="标题文字样式" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Title level={5}>主标题</Title>
          </Col>
          <Col span={8}>
            <Text>字体颜色</Text>
            <ColorPicker
              value={value.title?.textStyle?.color || '#333'}
              onChange={(color) => updateTitleStyle('textStyle', 'color', color.toHexString())}
              showText
            />
          </Col>
          <Col span={8}>
            <Text>字体大小</Text>
            <InputNumber
              value={value.title?.textStyle?.fontSize || 18}
              onChange={(val) => updateTitleStyle('textStyle', 'fontSize', val)}
              min={12}
              max={72}
              style={{ width: '100%' }}
            />
          </Col>
          <Col span={8}>
            <Text>字重</Text>
            <Select
              value={value.title?.textStyle?.fontWeight || 'bold'}
              onChange={(val) => updateTitleStyle('textStyle', 'fontWeight', val)}
              style={{ width: '100%' }}
            >
              <Option value="normal">普通</Option>
              <Option value="bold">粗体</Option>
              <Option value="bolder">特粗</Option>
              <Option value="lighter">细体</Option>
            </Select>
          </Col>

          <Col span={24}>
            <Title level={5}>副标题</Title>
          </Col>
          <Col span={8}>
            <Text>字体颜色</Text>
            <ColorPicker
              value={value.title?.subtextStyle?.color || '#aaa'}
              onChange={(color) => updateTitleStyle('subtextStyle', 'color', color.toHexString())}
              showText
            />
          </Col>
          <Col span={8}>
            <Text>字体大小</Text>
            <InputNumber
              value={value.title?.subtextStyle?.fontSize || 12}
              onChange={(val) => updateTitleStyle('subtextStyle', 'fontSize', val)}
              min={8}
              max={72}
              style={{ width: '100%' }}
            />
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default BasicConfig;